<template>
	<m-block class="more-server" gap="24 0" spa="20 0">
		<view class="title flex-between" @click="Jump('/pages/order/order')">
			<text>我的订单</text>
			<view class="">
				<text class="fs21 fw-400 mr-8">全部</text>
				<m-icon size="24" color="#888" type="icon-qianjin" />
			</view>
		</view>
		<view class="ul flex-between">
			<view class="li" @click="Jump('/pages/order/order?state=1')" style="position: relative;">
				<m-icon size="48" type="orderstate1" />
				<text>待付款</text>
				<text v-if="stateCount['1']" class="pointState">{{stateCount['1']}}</text>
			</view>
			<view class="li" @click="Jump('/pages/order/order?state=2')" style="position: relative;">
				<m-icon size="48" type="orderstate2" />
				<text>待发货</text>
				<text v-if="stateCount['2']" class="pointState">{{stateCount['2']}}</text>
			</view>
			<view class="li" @click="Jump('/pages/order/order?state=3')" style="position: relative;">
				<m-icon size="48" type="orderstate3" />
				<text>待收货</text>
				<text v-if="Number(stateCount['11'])||Number(stateCount['3'])" class="pointState">{{stateCount['11']+(Number(stateCount['3'])?stateCount['3']:0)}}</text>
			</view>
			<view class="li" @click="Jump('/pages/order/order?state=4')">
				<m-icon size="48" type="orderstate4" />
				<text>已完成</text>
			</view>
			<!-- <view class="li" @click="Jump('/pages/order/afterSale/afterSale')" style="position: relative;">
				<m-icon size="48" type="orderstate5" />
				<text>售后中</text>
				<text v-if="stateCount['6']" class="pointState">{{stateCount['6']}}</text>
			</view> -->
		</view>
	</m-block>
</template>

<script>
	import { mapState } from 'vuex'
	import { OrderCount } from "@/api/Order.js"
	export default {
		name: 'order',
		data() {
			return {
				stateCount: {},
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				userbalance: state => state.user.userbalance
			}),
			myBalance() {
				return this.userbalance[1].balance - this.userbalance[1].lockbalance;
			}
		},
		mounted() {
			// this.OrderCount()
		},
		methods: {
			async OrderCount() {
				const { success, data, msg } = await OrderCount();
				this.stateCount = this.arrObjGetEnum(data, 'state', 'count')
			}
		},
	}
</script>

<style lang="scss">
	.more-server {
		.title {
			padding: 0 30rpx;
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333;
		}

		.cell_box {
			.cell_right {
				flex: 1;
				padding-left: 42rpx;
			}
		}

		.ul {
			padding-top: 30rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-row-gap: 30rpx;
			text-align: center;

			text {
				display: block;
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.pointState {
		line-height: 32rpx;
		text-align: center;
		position: absolute;
		background-color: red;
		width: 32rpx;
		height: 32rpx;
		right: 45rpx;
		font-size: 21rpx;
		color: #fff !important;
		top: -15rpx;
		border: 2rpx solid #fff;
		border-radius: 100rpx;
	}
	
</style>